<template>
    <div>
        <el-row style="background: #fff; padding: 8px 8px 0;">
            <div >
                <el-button class="btn" type="primary" @click="addDepartment()" >添加规则</el-button>
            </div>
            <div>
                <el-table
                border
                :data="tableData"
                style="width: 100%; margin: 15px 0"
                row-key="ID"
                default-expand-all
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <el-table-column prop="date" type="index" label="序号" width="80" align="left"></el-table-column>
                <el-table-column prop="Name" label="规则名称" width="150"></el-table-column>
                <!-- <el-table-column prop="RuleClass" label="规则分类" width="180"></el-table-column> -->
                <el-table-column prop="Detail.BackupType" label="备份类型" width="180">
                  <template slot-scope="scope">
                    <span v-if="scope.row.Detail.BackupType===1">文件备份</span>
                    <span v-if="scope.row.Detail.BackupType===2">数据库备份</span>
                    <span v-if="scope.row.Detail.BackupType===3">系统备份</span>
                    <span v-if="scope.row.Detail.BackupType===4">云服务器备份</span>
                  </template>
                </el-table-column>
                <el-table-column prop="ScheduleName" label="时间对象" width="150"></el-table-column>
                <el-table-column prop="IsValid" label="规则生效" width="150">
                  <template slot-scope="scope">
                    <span v-if="scope.row.IsValid === 0" style="color:#909399">失效</span>
                    <span v-if="scope.row.IsValid === 1" style="color:#67C23A">生效</span>
                  </template>
                </el-table-column>
                <el-table-column prop="Descp" label="备注信息"></el-table-column>
                <el-table-column label="操作" align="left" width="150px">
                    <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
                </el-table>
            </div>
            </el-row>
            <el-dialog :close-on-press-escape='false' top="3%" @close='closeDialog' :title="ruleForm.Action===1?'添加规则':'编辑规则'" :visible.sync="dialogVisible" v-el-drag-dialog width="60%">
                <el-form  label-width="30%" :model="ruleForm" :rules="rules" ref="ruleForm">
                  <el-row :gutter="24">
                    <el-col :sm="24" :md="24" :lg="24">
                      <el-form-item label='规则名称：' prop="Detail.Name">
                          <el-input size="small" :disabled="ruleForm.Action === 2" v-model="ruleForm.Detail.Name" placeholder="请输入规则名称"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :sm="24" :md="24" :lg="24">
                      <el-form-item label='规则生效：'>
                          <el-switch  v-model="ruleForm.Detail.IsValid" :active-value="1" :inactive-value="0"></el-switch>
                      </el-form-item>
                    </el-col>
                    <el-col :sm="24" :md="24" :lg="24">
                      <el-form-item label='时间对象：'>
                          <el-select  size="small" v-model="ruleForm.Detail.ScheduleName" placeholder="请选择类型">
                              <el-option v-for="item in ScheduleList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                          </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='备份间隔：'>
                            <el-input size="small" placeholder="请输入备份间隔" v-model.number="ruleForm.Detail.Detail.Interval"><span slot="append">小时</span></el-input>
                        </el-form-item>
                      </el-col>
                    <el-col :sm="24" :md="24" :lg="24">
                      <el-form-item label='备注信息：' >
                          <el-input  size="small" v-model="ruleForm.Detail.Descp"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :sm="24" :md="24" :lg="24">
                      <el-form-item label='应用对象：' >
                        <el-radio-group v-model="ruleForm.Detail.Detail.DeviceObjType">
                          <el-radio :label="1">全部终端</el-radio>
                          <el-radio :label="2" style="margin-right:10px">指定部门</el-radio><el-button style="margin-right:15px;" type="primary" @click="dialogClick(1)" size="small" :disabled='ruleForm.Detail.Detail.DeviceObjType!=2'>选择</el-button>
                          <el-radio :label="6" style="margin-right:10px">指定终端</el-radio><el-button size="small" type="primary" @click="dialogClick(2)" :disabled='ruleForm.Detail.Detail.DeviceObjType!=6'>选择</el-button>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-dialog width="30%"  :close-on-press-escape='false' :close-on-click-modal ='false' v-el-drag-dialog :title="title" top="10%" :visible.sync="innerVisible" @close='dateRuleClose' append-to-body>
                      <el-form label-width="30%" :model="dateForm"  ref="dateForm">
                        <el-form-item :label="title+'：'">
                          <el-tree v-if="ruleForm.Detail.Detail.DeviceObjType===2" :data="options" show-checkbox default-expand-all node-key="ID" ref="tree" highlight-current :props="defaultProps" @check-change='treeChange'></el-tree>
                          <el-select v-model="value1" v-if="ruleForm.Detail.Detail.DeviceObjType===6" multiple placeholder="请选择">
                            <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-form>
                      <span slot="footer" class="dialog-footer">
                        <el-button @click="innerVisible = false">取 消</el-button>
                        <el-button type="primary" @click="timeClick('dateForm')">确 定</el-button>
                      </span>
                    </el-dialog>
                    <el-col :sm="24" :md="24" :lg="24">
                      <el-form-item label='部门名称：' v-if="ruleForm.Detail.Detail.DeviceObjType===2">
                        {{ruleForm.Detail.Detail.DeviceObj.length === 0 ? '' : ruleForm.Detail.Detail.DeviceObj}}
                      </el-form-item>
                    </el-col>
                    <el-col :sm="24" :md="24" :lg="24">
                      <el-form-item label='终端名称：'  v-if="ruleForm.Detail.Detail.DeviceObjType===6">
                        {{ruleForm.Detail.Detail.DeviceObj.length === 0 ? '' : ruleForm.Detail.Detail.DeviceObj}}
                      </el-form-item>
                    </el-col>
                    <el-col :sm="24" :md="24" :lg="24">
                      <el-form-item label='备份类型：'>
                        <el-radio-group v-model="ruleForm.Detail.Detail.BackupType">
                          <el-radio :label="1">文件备份</el-radio>
                          <el-radio :label="2">数据库备份</el-radio>
                          <el-radio :label="3">系统备份</el-radio>
                          <el-radio :label="4">云服务器备份</el-radio>
                          <!-- <el-radio :label="5">云服务器数据库备份</el-radio> -->
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <div v-if="ruleForm.Detail.Detail.BackupType===1">
                      
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='备份路径：' prop="Detail.Detail.FullDir">
                            <el-input size="small" placeholder="请填写完整目录名称，例如 : c:\work" v-model="ruleForm.Detail.Detail.FullDir"></el-input>
                            <span class="tips-style">（请填写完整的目录名称）</span>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='备份简称：' prop="Detail.Detail.DirName">
                            <el-input size="small" placeholder="填写目录名称，例如 : work" v-model="ruleForm.Detail.Detail.DirName"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='指定后缀：'>
                            <el-input size="small" placeholder="多类型空格隔开，填空备份所有类型文件，例如:*.doc *.docx *.xls" v-model="ruleForm.Detail.Detail.IncludeExt"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='排除后缀：'>
                            <el-input size="small" placeholder="多类型空格隔开，填空备份所有类型文件，例如 :*.doc *.docx *.xls" v-model="ruleForm.Detail.Detail.ExcludeExt"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='大小不超过：'>
                            <el-input size="small" placeholder="请输入文件大小" v-model="ruleForm.Detail.Detail.MaxFileSize"><span slot="append">M</span></el-input>
                            <span class="tips-style">（0表示不限制文件大小）</span>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item >
                            <el-checkbox v-model="ruleForm.Detail.Detail.IsCreateEmptyDir" :false-label="0" :true-label="1">备份磁盘创建空目录</el-checkbox>
                            <el-checkbox v-model="ruleForm.Detail.Detail.IsDelNotExists" :false-label="0" :true-label="1">保留被删除文件或目录</el-checkbox>
                        </el-form-item>
                      </el-col>
                    </div>
                    <div v-if="ruleForm.Detail.Detail.BackupType===2">
                      <!-- <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='终端选择：'>
                            <el-select  size="small" v-model="ruleForm.Detail.Detail.ScheduleName" placeholder="请选择终端">
                              <el-option v-for="item in EmployeeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                      </el-col> -->
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='数据库类型：'>
                          <el-radio-group @change="sqlChange()" v-model="ruleForm.Detail.Detail.DatabaseType">
                            <el-radio :label="0">MSSQL Server</el-radio>
                            <el-radio :label="1">MySQL</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='用户名：'>
                            <el-input size="small" placeholder="请输入用户名" v-model="ruleForm.Detail.Detail.DBUserID"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='密码：'>
                            <el-input size="small" show-password placeholder="请输入密码" v-model="ruleForm.Detail.Detail.DBPwd"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='指定数据库：'>
                            <el-input size="small" placeholder="请输入指定数据库" v-model="ruleForm.Detail.Detail.DBName"></el-input>
                            （指定数据库，*代表全部）
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='数据库端口：'>
                            <el-input size="small" placeholder="请输入数据库端口" v-model="ruleForm.Detail.Detail.DBPort"></el-input>
                            （填0代表使用默认端口）
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='数据库地址：'>
                            <el-input size="small" placeholder="请输入数据库地址" v-model="ruleForm.Detail.Detail.DBServerIP"></el-input>
                            （默认填空即可）
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='命令行模式：'>
                            <el-input size="small" placeholder="请输入命令行模式" v-model="ruleForm.Detail.Detail.DBCmdMode"></el-input>
                        </el-form-item>
                      </el-col>
                    </div>
                    <div v-if="ruleForm.Detail.Detail.BackupType===3">
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='备份磁盘：'>
                            <el-input size="small" placeholder="请输入备份地址" style="width:35% !important;" v-model="ruleForm.Detail.Detail.GhostDisk"></el-input>
                            （最后一个字符一定要为\，例如备份系统盘：c:\）
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item  label-width="22.5%">
                          <el-checkbox v-model="ruleForm.Detail.Detail.IsGhostLocalCach" :false-label="0" :true-label="1"> 开启本地缓存（先备份到本地再上传），缓存目录：</el-checkbox>
                          <el-input size="small" placeholder="请输入缓存目录" style="width:35% !important;" v-model="ruleForm.Detail.Detail.GhostLocalCachDir"></el-input>
                        </el-form-item>
                      </el-col>
                    </div>
                    <div v-if="ruleForm.Detail.Detail.BackupType===4">
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='云服务器名称：'>
                            <el-input size="small" placeholder="请输入云服务器名称" v-model="ruleForm.Detail.Detail.YunName"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='云服务器地址：'>
                            <el-input size="small" placeholder="请输入云服务器地址" v-model="ruleForm.Detail.Detail.YunServerIP"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='备份路径：' prop="Detail.Detail.YunFullDir">
                            <el-input size="small" placeholder="请输入备份路径" v-model="ruleForm.Detail.Detail.YunFullDir"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='备份简称：' prop="Detail.Detail.YunDirName">
                            <el-input size="small" placeholder="请输入备份简称" v-model="ruleForm.Detail.Detail.YunDirName"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='指定后缀：'>
                            <el-input size="small" placeholder="请输入云服务器名称" v-model="ruleForm.Detail.Detail.YunIncludeExt"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='排除后缀：'>
                            <el-input size="small" placeholder="请输入排除后缀" v-model="ruleForm.Detail.Detail.YunExcludeExt"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='大小不超过：'>
                            <el-input size="small" placeholder="请输入文件大小" v-model="ruleForm.Detail.Detail.YunMaxFileSize"><span slot="append">M</span></el-input>
                            <span class="tips-style">（0代表不启用）</span>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item  label-width="22.5%">
                            <el-checkbox v-model="ruleForm.Detail.Detail.YunIsCreateEmptyDir" :false-label="0" :true-label="1"> 备份磁盘创建空目录</el-checkbox>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item label='压缩传输：'>
                            <el-select  size="small" v-model="ruleForm.Detail.Detail.YunIsCompress" placeholder="请选择">
                              <el-option :value="1" label="是（传输过程压缩，影响服务器效率，节约带宽）"/>
                              <el-option :value="0" label="否（传输过程不压缩，不影响服务器效率，占用带宽）"/>
                            </el-select>
                        </el-form-item>
                      </el-col>
                    </div>
                  </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submit()">{{ruleForm.Action ===1 ? '确 认': '保 存'}}</el-button>
                </span>
            </el-dialog>
    </div>
</template>

<script>
import { connrequest } from "@/api/firstPage";
import { deepClone } from '@/utils'
// import { cfunc } from '@/api/user';
import { treeing, getTreeData } from "@/utils/index.js";
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  directives: { elDragDialog },
  data() {
    return {
      dialogVisible: false,
      innerVisible:false,
      title:'选择部门',
      value1:[],
      arr:[],
      defaultProps: {
        children: 'children',
        label: 'DepartmentName'
      },
      dateForm:{},
      ruleForm:{
        Action: 2,
        Detail: {
          Name: "",
          RuleClass: "RULE_DCD_RSYNC",
          RuleType: "RULE_DCD_RSYNC",
          ScheduleName: "",
          IsValid: 1,
          Descp: "数据同步规则",
          Interval: 24,
          Detail: {
            BackupType: 1,
            DeviceObjType: 1,
            DeviceObj: [],
            FullDir: "",
            DirName: "",
            IncludeExt: "",
            ExcludeExt: "",
            MaxFileSiz: 0,
            IsCreateEmptyDi: 0,
            IsDelNotExist: 0,
            DatabaseType: 0,
            DBServerI: "",
            DBUserID: "test",
            DBPwd: "test",
            Interval:24,
            DBName: "test",
            DBPort: 0,
            DBCmdMode: "mysqldump -u root -p --all-databases > %s",
            GhostDisk: "c:\\",
            IsGhostLocalCach: 1,
            GhostLocalCachDir: "d:\\tmp",
            YunName: "test",
            YunServerIP: "10.0.0.1",
            YunFullDir: "c:\\test",
            YunDirName: "test",
            YunIsCompress: 1,
            YunIncludeExt: "*.c,*.h",
            YunExcludeExt: "",
            MaxFileSize:0,
            YunMaxFileSize: 0,
            YunIsCreateEmptyDir: 0,
            YunIsDelNotExists: 0,
            YunDatabaseType: 1,
            YunDBServerIP: "",
            YunDBUserID: "test",
            YunDBPwd: "test",
            YunDBName: "test",
            YunDBCachDir: "/tmp",
            YunDBPort: 0,
            YunDBCmdMode: "mysqldump -u root -p --all-databases > %s"
          }
        }
      },
      EmployeeList:[],//存放终端对象的数据
      ScheduleList:[],//存放时间对象数组
      options:[],
      tableData: [],
      rules:{
        'Detail.Name':[{ required:true, message:'规则名称不能为空', trigger:'blur'}],
        departName: [
          { required: true, message: '部门名称不能为空' }
        ],
        'Detail.Detail.FullDir':[{ required:true, message:'备份路径不能为空', trigger:'blur'}],
        'Detail.Detail.DirName':[{ required:true, message:'备份简称不能为空', trigger:'blur'}],
        'Detail.Detail.YunFullDir':[{ required:true, message:'备份路径不能为空', trigger:'blur'}],
        'Detail.Detail.YunDirName':[{ required:true, message:'备份简称不能为空', trigger:'blur'}]
      }
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getData();
    this.getTimeObject();
    // this.GetEmployee();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // this.$nextTick(()=>{

    // })
  },
  watch:{},
  methods: {
    async getData(){
      const data = {
        Data : {
          RuleClass:"RULE_DCD_RSYNC"
        }
      };
      const res = await connrequest('GetDcdRule',data)
      // console.log(res.Data);
      this.tableData = res.Data
    },
    // 获取部门
    async GetDepartment(){
      this.options = [];
      const res = await connrequest('GetDepartment')
      this.options = getTreeData(treeing(res.Data));
      // console.log(this.options);
    },
    async getTimeObject(){
        const res = await connrequest('GetSchedule');
        res.Data.map(item=>{
            this.ScheduleList.push({
              value:item.Name,
              label:item.Name
            })
        })
        this.$set(this.ruleForm.Detail,'ScheduleName',res.Data[0].Name);
        // this.ruleForm.ScheduleName = res.Data[0].Name;
    },
    async operationDcdRule(action,message){
      const data = {
        Data : this.ruleForm
      }
      data.Data.Action = action;
      const res = await connrequest('GetDcdRule',data);
      if (res.Status.StatusCode === 0) {
        this.getData();
        this.$message(message);
      }
    },
    // 获取终端用户
    async GetEmployee(){
      this.options = []
      const res = await connrequest('GetEmployee')
      // this.options = getTreeData(treeing(res.Data));
      res.Data.map(item=>{
        this.options.push({
          label:item.Name,
          value:item.Name
        })
      })
      // console.log(this.options);

    },
    dateRuleClose(){},
    // 添加部门和终端
    dialogClick(status){
      this.innerVisible = true;
      // status === 1? this.title = '选择部门' : this.title= '选择终端'
      if (status === 1) {
        this.title = '选择部门'
        this.GetDepartment();
      }else{
        this.title = '选择终端'
        this.GetEmployee();
      }
    },
    addDepartment(){
      this.dialogVisible = true
      this.ruleForm.Action = 1;
    },
    handleEdit(item){
      console.log(item.Detail.Interval);
      this.ruleForm.Action = 2;
      this.ruleForm.Detail = deepClone(item)
      this.ruleForm.Detail.Detail.Interval = this.ruleForm.Detail.Detail.Interval /3600
      // this.$message.info('该功能还在开发中')
      // return
      // this.options = this.tableData
      // this.$set(this.ruleForm, 'lastDepartmemt', item.ID)
      // this.$set(this.ruleForm, 'departName', item.DepartmentName)
      this.dialogVisible = true
    },
    // 级联选项卡点击关闭下拉
    elCascaderOnlick(){
      let that = this;
      setTimeout(function() {
        document.querySelectorAll(".el-cascader-node__label").forEach((el) => {
          el.onclick = function() {
            this.previousElementSibling.click();
            that.$refs.cascaderAddr.dropDownVisible = false;
          };
        });
      }, 100);
    },
    handleChange(item){
      if(item){
        this.ParentID  = item[item.length - 1]
        this.ParentName = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels[0]
      }
    },
    async submit(){
      this.$refs['ruleForm'].validate( async(valid) => {
        if(valid){
          this.ruleForm.Detail.Detail.Interval = this.ruleForm.Detail.Detail.Interval*60*60
          const data = {
            Data:this.ruleForm
          }
          const res = await connrequest('EditDcdRule', data)
          if(res.Status.StatusCode === 0){
            this.$message({
              type: 'success',
              message: '规则添加成功'
            });
            this.getData()
            this.dialogVisible = false
          }
        }
      })
    },
    timeClick(){
      // console.log(this.value1);
      // console.log(this.title);

      if (this.title === '选择部门') {
        this.ruleForm.Detail.Detail.DeviceObj = this.arr;
      }else if(this.title === '选择终端'){
        // console.log(11111);

        this.ruleForm.Detail.Detail.DeviceObj = this.value1;
      }
      this.innerVisible = false;
    },
    closeDialog() {
        // 重置表单
        this.$nextTick(() => {
            this.$refs['ruleForm'].clearValidate();
            this.$refs['ruleForm'].resetFields();
        });
    },
    sqlChange(){
      this.ruleForm.Detail.Detail.DBUserID = '';
      this.ruleForm.Detail.Detail.DBPwd = ''
    },
    handleDelete(item){
      this.ruleForm.Detail = {...item}
      this.ruleForm.Action = 3
      this.$confirm('此操作将永久删除该规则, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let data = {
          
            Data:this.ruleForm
          
        }
        const res = await connrequest('EditDcdRule', data)
        if(res.Status.StatusCode === 0){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getData()
          this.dialogVisible = false
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    treeChange(data,checked,indeterminate){
      this.arr = []
      let newArr = this.$refs.tree.getCheckedNodes();
      console.log(this.$refs.tree.getCheckedNodes());
      newArr.map(item=>{
        if (!item.children) {
          this.arr.push(item.DepartmentName)
        }
      })
      // console.log(this.$refs.tree);
      // console.log(data,checked,indeterminate);

    }
  }
};
</script>
<style scoped lang='scss'>
/* @import url(); 引入css类 */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
::v-deep.el-input--small{
    width:60% !important;
}
.el-select{
  width: 60% !important;
}
.el-form-item{
  margin-bottom: 10px !important;
}
</style>
